<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../lib/sui.min.css">
    <link rel="stylesheet" href="../../lib/sui-append.min.css">
    <link rel="stylesheet" href="../../public/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../public/css/style.css">
    <link rel="stylesheet" href="css/style.css">

    <script type="application/javascript" src="../../lib/jquery.min.js"></script>
    <script type="application/javascript" src="../../lib/sui.min.js"></script>
    <script type="application/javascript" src="js/student.js"></script>

    <script>
        $('#newStrip').on('okHide', function(e){console.log('okHide')});
        $('#newStrip').on('okHidden', function(e){console.log('okHidden')});
        $('#newStrip').on('cancelHide', function(e){console.log('cancelHide')});
        $('#newStrip').on('cancelHidden', function(e){console.log('cancelHidden')});
        $('#leave-date1 input').datepicker({size:"small"});
        $('#leave-date2 input').datepicker({size:"small"});



    </script>
</head>
<body class="page_body">
<div class="header">
    <div class="header nav-content" style="width: 100%;min-width: 1000px">
        <div class="sui-navbar navbar-inverse">
            <div class="header_navbar-inner navbar-inner">
                <ul class="header_nav sui-nav" style="width: 100%">
                    <li><a href="#"><i class="iconfont">&#xe600</i>首页</a></li>
                    <li><a href="#"><i class="iconfont">&#xe604</i>教育咨询</a></li>
                    <li><a href="#"><i class="iconfont">&#xe602</i>资源中心</a></li>
                    <li><a href="#"><i class="iconfont">&#xe601</i>应用中心</a></li>
                    <li><a href="#"><i class="iconfont">&#xe603</i>个人中心</a></li>

                    <li style="float: right;"><a style="padding-left: 5px" href="#"><i class="iconfont">&#xe606</i></a></li>
                    <li style="float: right;"><a style="padding-left: 5px" href="#"><i class="iconfont">&#xe607</i></a></li>
                    <li style="float: right;"><a style="padding-left: 5px" href="#">姚朝阳</a></li>

                </ul>

            </div>
        </div>
    </div >
    <img src="../../public/img/header.jpg" style="width:100%;min-width: 1000px;min-height: 100px">
</div>
<div class="frame student-info">
    <div class="label student-id" id="labelStudentId" style="margin-left: 40px;position:relative;">
        <div class="id portrait">
            <img src="../../public/img/default_student.png" >

        </div>

        <div class="id student-base-info">
            <p>姓名:张三</p>
            <p>学号:PN01109392</p>

        </div>

        <!--下拉控件-->
        <div class="id choose-term">
            <span class="sui-dropdown"><span class="dropdown-inner">
            <a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle "><span class="term-name">本学期</span> <i class="caret" style="float: right;line-height: 18px;font-size: 14px"></i></a>
            <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
                <li class="choose-term-list" role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">北京</a></li>
                <li class="choose-term-list" role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">圣彼得堡</a></li>
                <li class="choose-term-list active" role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);">本学期</a></li>
            </ul></span></span>
        </div>

        <div class="id info-right">
            <p>出勤率:96%</p>
            <p>缺勤次数:2</p>
            <p>早退次数:1</p>
            <p>旷课次数:0</p>

        </div>

        <div class="id info-left">
            <p>出勤次数:96</p>
            <p>迟到次数:2</p>
            <p>请假次数:1</p>
        </div>
    </div>
    <div>
    <div style="width:262px;">
        <div style="float:left;margin-left:40px;width:100px;">
            <p><b>上课时间：</b></p>
        </div>
        <div style="float:left;">
            <div>
                <p style="margin-bottom:5px;"><b>周一至周五</b></p>
                <div>
                    <p style="margin-bottom:5px;margin-top:5px;"><b>8:00-11:30</b></p>
                    <p style="margin-bottom:5px;margin-top:5px;"><b>13:45-17:30</b></p>
                </div>
            </div>
            <div>
                <p style="margin-bottom:5px;"><b>周六</b></p>
                <div>
                    <p style="margin-bottom:5px;margin-top:5px;"><b>8:00-11:30</b></p>
                </div>
            </div>
        </div>
    </div>
    <div style="width:262px;">
        <div style="float:left;margin-left:40px;width:100px;">
            <p><b>节假日安排：</b></p>
        </div>
        <div style="float:left;">
            <div>
                <p style="margin-bottom:5px;"><b>2016年寒假安排：</b></p>
                <div style="width:120px;">
                    <p style="margin-bottom:5px;margin-top:5px;"><b>2016年1月18日-2016年2月20日</b></p>

                </div>
            </div>
        </div>
    </div>
</div>

    <div class="label strip" style="margin-left: 40px;">
        <a data-toggle="modal" data-target="#newStrip" data-keyboard="false" class="strip button">请假条</a>
        <a data-toggle="modal" data-target="#listModal" data-keyboard="false" class="strip look">查看</a>
    </div>
</div>


<div class="frame student_table">
    <div class="label table_date">
        <form class="sui-form form-horizontal">
            <div class="control-group" style="width: 100%">
                <span>日期&nbsp;&nbsp;</span>
                <div class="input-control control-right">
                    <input type="text" data-toggle="datepicker" class="date_input_top" id="search_date_from">
                    <i class="sui-icon iconfont table_header_date_icon">&#xe605;</i>
                </div>
                <span> 至 </span>
                <div class="input-control control-right">
                    <input type="text" data-toggle="datepicker" class="date_input_top" id="search_date_to">
                    <i class="sui-icon iconfont table_header_date_icon">&#xe605;</i>
                </div>
                <span>&nbsp;&nbsp;状态&nbsp;&nbsp;</span>
                <span class="sui-dropdown dropdown-bordered table_header select">
                    <span class="dropdown-inner">
                        <a role="button" data-toggle="dropdown" class="dropdown-toggle" id="status_select">
                            <input type="hidden" value="全部" id="search_status_input"><i class="caret"></i><span>全部</span>
                        </a>
                        <ul role="menu" aria-labelledby="status_drop" class="sui-dropdown-menu">
                            <li role="presentation" class="active"><a role="menuitem" tabindex="-1" value="全部">全部</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" value="出勤">出勤</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" value="迟到">迟到</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" value="早退">早退</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" value="请假">请假</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" value="旷课">旷课</a></li>
                        </ul>
                    </span>
                </span>
                <a class="sui-btn btn-primary table_header search_button" onclick="searchButtonClicked()">查询</a>
            </div>
        </form>
    </div>
    <a class="sui-btn" style="background-color: transparent; margin-top: 30px; margin-bottom: 5px; border: none; font-size: 16px; display: none"><i class="iconfont icon-arrowleft"></i> 返回</a>
    <div class="table_content_div">
        <table class="sui-table table-zebra attend_table table-bordered">
            <tbody>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td colspan="2">8:00-11:30</td>
                <td colspan="2">14:00-17:30</td>
                <td>在校轨迹</td>
            </tr>
            <tr>
                <td>001</td>
                <td>LS</td>
                <td>出勤</td>
                <td>出勤</td>
                <td>出勤</td>
                <td>出勤</td>
                <td class="attend_table_detail" data-id="1" onclick="tableDetailButtonClicked(event)">详细 <i class="iconfont icon-arrow-down attend_table_detail_arrow"></i></td>
            </tr>
            <tr data-id="attend_detail_area1" class="table_detail_content_hide">
                <td colspan="7" data-id="attend_detail_content1" class="table_detail_background" style="height: 0; padding: 0; line-height: 0">
                    <div style="width: 100%; margin-top: 10px">
                        <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                            <div style="width: 12px;height: 12px;border-radius: 6px;background-color: #5396F1;right: -6px;position: absolute"></div>
                            <p style="margin: 0">
                                <span style="float: right; margin-right: 20px; margin-top: -3px">7:45</span>
                                <span style="float: right; margin-right: 21px;margin-top: -3px">进入校门，正常出行。</span>
                            </p>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%;height: 18px">
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                            <p style="margin: 0">
                                <span style="float: right; width: 10px;height: 9px;border-bottom: 1px solid #5396F1"></span>
                                <span style="float: right; margin-right: 11px;">7:45</span>
                                <span style="float: right; margin-right: 21px;">进入校门，正常出行。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%">
                            <p style="margin: 0">
                                <span style="float:left;width: 10px;height: 9px; border-bottom: 1px solid #5396F1"></span>
                                <span style="float: left; margin-left: 11px">8:45</span>
                                <span style="float: left;margin-left: 21px">离开高一二班教室。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                            <p style="margin: 0">
                                <span style="float: right; width: 10px;height: 9px;border-bottom: 1px solid #5396F1"></span>
                                <span style="float: right; margin-right: 11px;">7:45</span>
                                <span style="float: right; margin-right: 21px;">进入校门，正常出行。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%">
                            <p style="margin: 0">
                                <span style="float:left;width: 10px;height: 9px; border-bottom: 1px solid #5396F1"></span>
                                <span style="float: left; margin-left: 11px">8:45</span>
                                <span style="float: left;margin-left: 21px">离开高一二班教室。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width: 50%;border-right: 1px solid #5396F1;margin-right: 50%;height: 18px">
                        </div>
                    </div>
                    <div style="width: 100%; margin-bottom: 15px">
                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%;position: relative">
                            <div style="width: 12px;height: 12px;border-radius: 6px;background-color: #5396F1;bottom:0;left: -6px;position: absolute"></div>
                            <p style="margin: 0">
                                <span style="float: left; margin-left: 20px;margin-bottom: -3px;">8:45</span>
                                <span style="float: left;margin-left: 21px;margin-bottom: -3px">离开高一二班教室。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr style="display: none"></tr>
            <tr>
                <td>001</td>
                <td>LS</td>
                <td>出勤</td>
                <td>出勤</td>
                <td>出勤</td>
                <td>出勤</td>
                <td class="attend_table_detail" data-id="2" onclick="tableDetailButtonClicked(event)">详细 <i class="iconfont icon-arrow-down attend_table_detail_arrow"></i></td>
            </tr>
            <tr data-id="attend_detail_area2" class="table_detail_content_hide">
                <td colspan="7" data-id="attend_detail_content2" class="table_detail_background" style="height: 0; padding: 0; line-height: 0">
                    <div style="width: 100%; margin-top: 10px">
                        <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                            <div style="width: 12px;height: 12px;border-radius: 6px;background-color: #5396F1;right: -6px;position: absolute"></div>
                            <p style="margin: 0">
                                <span style="float: right; margin-right: 20px; margin-top: -3px">7:45</span>
                                <span style="float: right; margin-right: 21px;margin-top: -3px">进入校门，正常出行。</span>
                            </p>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%;height: 18px">
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                            <p style="margin: 0">
                                <span style="float: right; width: 10px;height: 9px;border-bottom: 1px solid #5396F1"></span>
                                <span style="float: right; margin-right: 11px;">7:45</span>
                                <span style="float: right; margin-right: 21px;">进入校门，正常出行。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%">
                            <p style="margin: 0">
                                <span style="float:left;width: 10px;height: 9px; border-bottom: 1px solid #5396F1"></span>
                                <span style="float: left; margin-left: 11px">8:45</span>
                                <span style="float: left;margin-left: 21px">离开高一二班教室。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                            <p style="margin: 0">
                                <span style="float: right; width: 10px;height: 9px;border-bottom: 1px solid #5396F1"></span>
                                <span style="float: right; margin-right: 11px;">7:45</span>
                                <span style="float: right; margin-right: 21px;">进入校门，正常出行。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%">
                            <p style="margin: 0">
                                <span style="float:left;width: 10px;height: 9px; border-bottom: 1px solid #5396F1"></span>
                                <span style="float: left; margin-left: 11px">8:45</span>
                                <span style="float: left;margin-left: 21px">离开高一二班教室。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                    <div style="width: 100%">
                        <div style="width: 50%;border-right: 1px solid #5396F1;margin-right: 50%;height: 18px">
                        </div>
                    </div>
                    <div style="width: 100%; margin-bottom: 15px">
                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%;position: relative">
                            <div style="width: 12px;height: 12px;border-radius: 6px;background-color: #5396F1;bottom:0;left: -6px;position: absolute"></div>
                            <p style="margin: 0">
                                <span style="float: left; margin-left: 20px;margin-bottom: -3px;">8:45</span>
                                <span style="float: left;margin-left: 21px;margin-bottom: -3px">离开高一二班教室。</span>
                            </p>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr style="display: none"></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Modal 生成请假条的弹框-->
<div id="newStrip" tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade strip">
    <div class="modal-dialog">
        <div class="modal-content" >
            <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>

            <div class="modal-body">
                <p style="position: absolute;left: 30px">请假人</p>
                <p style="position: absolute;left: 100px">张三</p>
                <p style="position: absolute;left: 30px;top: 40px;">请假时间</p>

                <p style="position: absolute;left: 100px;top: 40px;">从</p>


                <form class="sui-form" id="modal-time1" style="position: absolute;left: 120px;top: 40px;margin-top: 11px">
                    <input type="text" value="2016-01-01 00:00">
                </form>
                <p style="position: absolute;left: 100px;top: 70px;">至</p>
                <!--&lt;!&ndash;选择日期的form&ndash;&gt;-->

                <form  class="sui-form" id="modal-time2" style="position: absolute;left: 120px;top: 70px;margin-top: 11px">
                    <input type="text" value="2016-01-01 00:00">
                </form>
                <p style="position: absolute;left: 30px;top: 100px;">请假理由</p>
                <textarea style="position: absolute;left: 100px;top: 115px;width: 210px;" rows="2">

                </textarea>

            </div>
            <div class="modal-footer">
                <button type="button" data-ok="modal" class="sui-btn btn-primary btn-large">提交</button>
            </div>
        </div>
    </div>
</div>

<!-- ListModal 查看请假条的弹框-->
<div id="listModal" tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade strip">
    <div class="modal-dialog">
        <div class="modal-content" >
            <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
            <div class="modal-body">
                <div class="date">11.3</div>
                <div class="chip unchecked">
                    <span class="content">张三于上午6:00递交了一份请假条</span>
                    <a class="status">编辑</a>

                    <span class="status">未审核</span>
                </div>
                <div class="date">11.3</div>
                <div class="chip checked">
                    <span class="content">张三于上午6:00递交了一份请假条</span>
                    <span class="status">已审核</span>
                </div>

                <div class="sui-pagination pagination-small" style="margin-left: 40px" >
                    <ul>
                        <li class="prev disabled"><a href="#">«上一页</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li class="dotted"><span>...</span></li>
                        <li><a href="#">10</a></li>
                        <li class="next"><a href="#">下一页»</a></li>
                    </ul>

                </div>
            </div>


        </div>
    </div>
</div>
</div>

</body>


<script>
    $(document).ready(function () {
        $('#modal-time1 input').datepicker({
            timepicker:true,
            autoclose: false, //这里最好设置为false
        });

        $('#modal-time2 input').datepicker({
            timepicker:true,
            autoclose: false, //这里最好设置为false
        });
    })

</script>
</html>